<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>
</body>
<script type="text/babel">
	// 组件即是对HTML标签的一种扩展，在React 当中组件分为类组件和函数组件。
	// 1- 函数组件即是通过函数定义的组件
	// 2- 函数的名字即是组件的名字
	// 3- 函数的返回值即是该组件渲染的内容
	// 4- 函数的名字要求大写。
	// 5- 在使用组件时，可以将函数的名字作为标签名即可
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	{
		// 函数组件1
		// function App(){
		// 	return (
		// 		<div>
		// 			<h3>标题APP</h3>
		// 		</div>
		// 	)
		// };
		// root.render(<App/>);
	}
	{
		// 定义函数2
		// const App = ()=>{
		// 	return (
		// 		<div>
		// 			<h3>标题APP</h3>
		// 		</div>
		// 	)
		// };
		// root.render(<App/>);
	}
	{
		// 函数组件定义3(常见)
		const App = ()=>(
			<div>
				<h3>标题APP</h3>
			</div>
		);
		root.render(<App/>);
	}
	

</script>
</html>